<template>
  <view class="blog-discovery">
    <!-- 顶部标题区 -->
    <header>
      <h1 class="title">首页</h1>
      <view class="search-icon" @click="tosearch">🔍</view>
    </header>
    
    <!-- 主内容区域 -->
    <main>
     <bigview v-for="(item,index) in showitem.bigview" :key="index" :obj="item"></bigview>
	  
      <!-- 下方两个小图部分 -->
      <view class="sub-banners">
      <subItem v-for="(item,index) in showitem.subItem" :key="index" :obj="item"></subItem>
	  </view>
      
      <!-- 精选专题区域 -->
      <view class="featured-section">
        <view class="section-header">
          <h2>精选专题</h2>
        <!--  <view class="view-all">查看全部 ></view> -->
        </view>
        
        <view class="featured-items">
          <!-- <view class="featured-item" v-for="(item, index) in featuredItems" :key="index">
            <view class="featured-image"></view>
            <view class="item-info">
              <text class="views-count">{{item.views}}人关注</text>
              <h3 class="item-title">{{item.title}}</h3>
            </view>
          </view> -->
		  <zhuanjing v-for="(item, index) in showitem.zhuanjing" :obj="item" :key="index"></zhuanjing>
        </view>
      </view>
    </main>
  </view>
</template>

<script>
	import bigview from "@/component/indexpage/bigview.vue"
	import subItem from "@/component/indexpage/sub-item.vue"
	import zhuanjing from "@/component/indexpage/zhuanjing.vue"
export default {
  name: 'indexpage',
  components:{
	bigview,
	subItem,
	zhuanjing
  },
  props:{
	showitem:{
		type:Object,
		default:()=>{}
	}  
  },
  data() {
    return {
	  
    };
  },methods:{
	tosearch(){
		uni.navigateTo({
			url:"/pages/router/search/search"
		})
	}
  },
  mounted() {
  	
  },
  beforeDestroy() {
  	
  }
};
</script>

<style scoped>
/* 全局样式 */
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: #f8f9fa;
  color: #333;
  max-width: 500px;
  margin: 0 auto;
}

/* 顶部标题区 */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.search-icon {
  font-size: 20px;
  color: #555;
}

/* 主内容区域 */
main {
  padding: 15px;
  padding-bottom: 70px; /* 为底部导航留出空间 */
}


/* 下方小图区域 */
.sub-banners {
	  /* display: flex; */
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  gap: 15px;
	  margin-bottom: 25px;
	  
	}

/* 精选专题区域 */
 .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.section-header h2 {
  font-size: 18px;
  margin: 0;
  font-weight: 600;
}

.view-all {
  font-size: 14px;
  color: #6c757d;
}

.featured-items {
  display: flex;
  flex-direction: column;
  gap: 15px;
}


/* 响应式调整 */
@media (max-width: 350px) {
  .sub-title {
    font-size: 13px;
  }
  
  .item-title {
    font-size: 14px;
  }
  
  .featured-image {
    width: 100px;
  }
}
</style>